let products = []

// const containerEle = document.querySelector('.container')

function showAllProducts() {
    let str = ''
    products.forEach((item) => {
        let itemStr = `<div class="item" >
        <div class="wraper-l">
            <img src="${item.picture}" width="70" height="97" alt="book1">
        </div>
        <div class="wrapper-r">
            <h2>${item.name}</h2>
            <p>真有趣</p>
            <p>价格 <span>￥${item.price}</span></p>
            <button data-index="${item.id}">加入购物车</button>
        </div>
    </div>`

        str = str + itemStr
    })

    containerEle.innerHTML = str
}

/**
 * 添加购物车
 *   本质: 将商品数据添加到localStorage
 */
function addCart() {
    containerEle.addEventListener('click', function(e) {
        e = e || window.event //事件对象
        let target = e.target || e.srcElement // 事件目标对象
        if (target.nodeName.toLowerCase() == 'button') {
            //1. 构造添加到购物车的商品数据
            let id = target.getAttribute('data-index')
            let product = products.find((item) => item.id == id)
                //   {
                //     id: 1004,
                //     name: 'react高级编程',
                //     picture: './image/book44.jpg',
                //     price: 48.9
                //   }
            product = {
                ...product, //选中商品
                num: 1, //数量
                singlePrice: product.price, //单个商品总价
                state: false // 选中状态
            }

            //  2.1. 从localstorage取出商品数据,如果是第一次，没有返回 空数组
            let productStr = localStorage.getItem('CARTLIST')
            let carts = JSON.parse(productStr) || []
                // 3.遍历购物车商品数组， 判断添加的商品，在商品数组中是否已经存在，
            let newProduct = carts.find((item) => item.id == product.id)
            if (newProduct) {
                // 3.1如果已经存在，改变商品数量
                newProduct.num++
            } else {
                //3.2如果不存在，添加一项商品
                carts.push(product)
            }

            //  4. 已经添加数据的数组重新写回localstorage
            localStorage.setItem('CARTLIST', JSON.stringify(carts))

            alert('添加购物车成功!')
        }
    })
}

/**
 * 购物车页面
 */
function goCart() {
    const cartBtn = document.querySelector('#cartBtn')
    cartBtn.onclick = function() {
        location.href = './cart.html'
    }
}

/**
 * 获取后端商品列表数据
 */
function getProductList() {
    const xhr = new window.XMLHttpRequest
        //2.建立连接
    res.setHeader('Access-Control-Allow-Origin')
    xhr.open('GET', 'locaihost:3000/product_list')
        //3.发送请求
    xhr.send()
        //4.接收响应数据
    xhr.onreadystatechange = function() {
        //4表示服务端响应数据完成,客户端可以开始接收响应数据
        if (xhr.readyState == 4) {
            //判断响应状态
            if (xhr.status == 200) {
                //获取服务响应数据
                let content = xhr.responseText
                products = JSON.parse(content)
                showProductList()
            }
        }
    }
}

// function showProductList() {
//     let str = ''
//     products.forEach(item => {
//                 let itemStr = ` <li>
//         <img src="${item.picture}" alt=""  width="100px" height="100px"/>
//         <h3>${item.name}</h3>
//         <p>${item.price}</p>
//         </li>
//         str += itemStr
//     })
//     const ul = document.querySelector('ul')
//     ul.innerHTML = str
// }